import React,{Component} from 'react'
import {message} from 'antd'
import $ from 'jquery'
import './login.css'
import Button from '../../components/button/button'
import logo from '../../Picture/logo.png'
import * as tools from '../../tools/tools';
class Login extends Component{
    constructor(props) {
        super(props);
        this.state={
            rondomnum: Math.floor((Math.random()*10000000000000+1).toString() + Date.now()).toString(36),
            username:'',
            password:'',
            validateCode:null
        }
    }
    componentDidMount() {
        window.addEventListener('keydown', (even)=>{
            if(even.keyCode ==13){
                this.login();
            }
        })
     }
    Refresh=()=>{
        let rondomnum2 = Math.floor((Math.random()*10000000000000+1).toString() + Date.now()).toString(36);
            this.setState({
                Image: tools.apiUrl+'captcha?captcha_key='+rondomnum2,
                rondomnum:rondomnum2
            })
    }

    login=()=>{
        let data={
            username:this.state.username,
            password:this.state.password,
            validateCode:this.state.validateCode,
            captcha_key:this.state.rondomnum
        }
        $.ajax({
            url: tools.apiUrl+'login?captcha_key='+this.state.rondomnum,
            data:data,
            type:'Post',
            success:(res)=>{
                if(res.status ==1){
                    localStorage.setItem("menu",JSON.stringify(res.result.rbac))
                    localStorage.setItem('token', res.result.token);
                    if(res.msg === "ok"){
                        this.props.history.push("/HomePage")
                    }
                }else{
                    message.error(res.msg)
                    this.Refresh();
                }
            },
            error:(err)=>{
                this.Refresh();
            }
        })
    }
    usernamechange=(e)=>{
        this.setState({
            username:e.target.value
        })
    }
    passwordchange=(e)=>{
        this.setState({
            password:e.target.value
        })
    }
    validateCodechange=(e)=>{
        this.setState({
            validateCode:e.target.value
        })
    }
    
    render(){ 
        return(
            <div className="login_background">
                <div className="login_boundary">
                    <div className="login_logo">
                        <img src={logo} alt=""/>
                    </div>
                    <div className="login_title">
                        <span>买单英雄管理后台</span>
                    </div>
                    <div className="username_box">
                        <i className="username_icon icon"></i>
                        <input className="input"  type="text" placeholder="请输入账号" onChange={this.usernamechange} value={this.state.username} />
                    </div>
                    <div className="password_box">
                        <i className="password_icon icon"></i>
                        <input className="input" type="password" placeholder="请输入密码" onChange={this.passwordchange} value={this.state.password}/>
                    </div>
                    <div className="validateCode_box">
                        <input className="validateCode" type="text" placeholder='请输入验证码' onChange={this.validateCodechange} value={this.state.validateCode}/>
                        <img className="validataCode_image" src={tools.apiUrl+'captcha?captcha_key='+this.state.rondomnum}  onClick={this.Refresh} alt=""  />
                    </div>
                    <div className="login_button">
                        <Button onClick={this.login}>登录</Button>
                    </div>
                </div>
            </div>
        )
    }
}
export default Login